<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的账单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="{{asset('/css/app.css')}}">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <!--如果你用到了拓展包中的组件，还需要引用下面两个-->
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
    <link rel="stylesheet" href="{{asset('/css/mobile/common_web.css')}}">
    <link rel="stylesheet" href="{{asset('/css/mobile/check.css')}}">
</head>
<body>
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 标题栏 -->
        <header class="bar bar-nav" style="background:#24314D;color:#fff;height:3rem;line-height:3rem;">
            <a class="external icon icon-left pull-left" style="font-size:1.4rem;color:#fff;line-height:2rem;" href={{url('admin/person')}}></a>
            <h1 class="title" style="color:#fff;line-height:3rem;">我的账单</h1>
        </header>
        <!-- 工具栏 -->
        <nav class="bar bar-tab" style="background:#fff;">
            <a class="tab-item external external" href="{{url('/admin/home')}}">
                <i class="icon iconfont">&#xe649;</i>
                <span class="tab-label">首页</span>s
            </a>
            <a class="tab-item external active external" href="{{url('/admin/person')}}">
                <i class="icon iconfont">&#xe648;</i>
                <span class="tab-label">个人设置</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content pull-to-refresh-content" data-ptr-distance="55">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader" ></div>
                {{--<div class="pull-to-refresh-arrow" style="color:#24314D;"></div>--}}
            </div>
            <div class="list-block" style="margin: 0;">
                <form action="{{url('/admin/billIndex')}}" method="get">
                    <div class="item-content" style="color:#fff;">
                        <div class="item-inner">
                            <div class="item-title label" style="width:38%;font-size:1.3rem;">查看周期：
                            </div>
                            {{--<div class="item-input" style="border:1px solid #fff;width:30%;text-align: center">--}}
                            <input type="text" class="picker" name="year" placeholder="请选择年份" style="border:1px solid #fff;width:30%;text-align: center;color:#fff;">
                            {{--<option value="2018">201833年</option>--}}
                            {{--</div>--}}
                            <div style="width:4.4rem;">
                                <button type="submit" class="button button-fill" style="width:100%;height:2.15rem;border:0.05rem solid #5E677C;-moz-box-shadow:0px 0px 5px #5E677C; -webkit-box-shadow:0px 0px 5px #5E677C; box-shadow:0px 0px 5px #5E677C;background: -webkit-linear-gradient(305deg, rgba(49, 69, 107, 1) 0%, rgba(49, 69, 107, 1) 0%, rgba(38, 78, 136, 1) 53%, rgba(50, 68, 105, 1) 99%, rgba(50, 68, 105, 1) 100%);
	background: -moz-linear-gradient(145deg, rgba(49, 69, 107, 1) 0%, rgba(49, 69, 107, 1) 0%, rgba(38, 78, 136, 1) 53%, rgba(50, 68, 105, 1) 99%, rgba(50, 68, 105, 1) 100%);
	background: linear-gradient(145deg, rgba(49, 69, 107, 1) 0%, rgba(49, 69, 107, 1) 0%, rgba(38, 78, 136, 1) 53%, rgba(50, 68, 105, 1) 99%, rgba(50, 68, 105, 1) 100%);">
                                    查看
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                @foreach($list as $v)
                    <ul style="margin-top:0.8rem;">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">账单周期:{{$v->year}}/{{$v->month}}/01--{{$v->year}}/{{$v->month}}
                                    /31
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">收益类型：代理推广收益</div>
                                <div class="item-title">收益金额：{{$v->total}}元</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title"></div>
                                <a onclick="jumpTo('{{url('/admin/billDetail/')}}', {
                                        'year': '{{$v->year}}',
                                        'month': '{{$v->month}}',
                                        'ids': '{{$v->ids}}',
                                        'total': '{{$v->total}}'
                                        })">
                                    <div class="item-title" style="cursor: pointer">点击查看详细收入</div>
                                </a>
                            </div>
                        </li>
                    </ul>
                @endforeach
            </div>
        </div>
    </div>
</div>
</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
<script>$.init()</script>

<script>
  function jumpTo(url, data) {
    let newUrl = url + '/' + JSON.stringify(data);
    location.href = newUrl
  }

  $(function () {
    let nowDate = new Date().getFullYear();
    let arr = [];

    for (let i = 12; i >0 ; i--) {
      arr[12 - i] = nowDate - 12 + i
    }

    // 下拉
    $(".picker").picker({
      toolbarTemplate: '<header class="bar bar-nav">\
              <button class="button button-link pull-right close-picker">确定</button>\
            </header>',
      cols: [
        {
          textAlign: 'center',
          values: arr
        }
      ]
    });

    // 添加'refresh'监听器
    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
      // 模拟2s的加载过程
      setTimeout(function () {
        var cardNumber = $(e.target).find('.card').length + 1;
        var cardHTML = '<div class="card">' +
            '<div class="card-header">card' + cardNumber + '</div>' +
            '<div class="card-content">' +
            '<div class="card-content-inner">' +
            '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
            '</div>' +
            '</div>' +
            '</div>';

        $(e.target).find('.card-container').prepend(cardHTML);
        // 加载完毕需要重置
        $.pullToRefreshDone('.pull-to-refresh-content');
      }, 2000);
    }, {passive: false});

  })
</script>
</html>
